<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${pagetitle}详情</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>-->
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
    <script src="/plugs/echar/infographic.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <style>
        .info-title{
            font-family: 微软雅黑;
            font-weight: bold;
            background-color: #e2e2e2;
            padding: 3px;
        }
        .row{
            border: solid 1px gray;
            border-bottom: none;
            /*padding: 3px 3px 3px 3px;*/
        }
        .title{background-color: #996699;color: white;}
    </style>
</head>
<body >
    <div class="container"  id="app">
        <div class="row">
            <div class="col-md-12 text-center title"><h4>基本信息</h4></div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">代码</div>
            <div class="col-md-2">{{info._id}}</div>
            <div class="col-md-2 info-title">名称</div>
            <div class="col-md-2">{{stock.name}}</div>
            <div class="col-md-2 info-title">行业</div>
            <div class="col-md-2">{{stock.industry}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">当前价格</div>
            <div class="col-md-2">{{stock.price}}</div>
            <div class="col-md-2 info-title">昨收</div>
            <div class="col-md-2">{{stock.yesterdayPrice}}</div>
            <div class="col-md-2 info-title">涨幅</div>
            <div class="col-md-2"><span v-html="toStockColorFont(stock.fluctuate)"></span></div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">今日最高</div>
            <div class="col-md-2">{{stock.todayMax}}</div>
            <div class="col-md-2 info-title">今日最低</div>
            <div class="col-md-2">{{stock.todayMin}}</div>
            <div class="col-md-2 info-title">市值</div>
            <div class="col-md-2">{{stock.totalValue}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">52周最高</div>
            <div class="col-md-2">{{stock.high52w}}</div>
            <div class="col-md-2 info-title">52周最低</div>
            <div class="col-md-2">{{stock.low52w}}</div>
            <div class="col-md-2 info-title">分类</div>
            <div class="col-md-2">{{stock.stype}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">市净率</div>
            <div class="col-md-2">{{stock.pb}}</div>
            <div class="col-md-2 info-title">每股收益</div>
            <div class="col-md-2">{{stock.bvps}}</div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center title"><h4>估值信息</h4></div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">市盈率(静)</div>
            <div class="col-md-2">{{stock.pes}}</div>
            <div class="col-md-2 info-title">市盈率(TTM)</div>
            <div class="col-md-2">{{stock.pettm}}</div>
            <div class="col-md-2 info-title">市盈率(动)</div>
            <div class="col-md-2">{{stock.ped}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">净资产收益率</div>
            <div class="col-md-2">{{stock.roe}}</div>
            <div class="col-md-2 info-title">三年平均ROE</div>
            <div class="col-md-2">{{stock.threeYearRoe}}</div>
            <div class="col-md-2 info-title">五年平均ROE</div>
            <div class="col-md-2">{{stock.fiveYearRoe}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">动态股息</div>
            <div class="col-md-2">{{stock.dy}}</div>
            <div class="col-md-2 info-title">三年平均股息</div>
            <div class="col-md-2">{{stock.threeYearDy}}</div>
            <div class="col-md-2 info-title">五年平均股息</div>
            <div class="col-md-2">{{stock.fiveYearDy}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">上次分红</div>
            <div class="col-md-2">{{stock.dividend}}</div>
            <div class="col-md-2 info-title">上次分红日期</div>
            <div class="col-md-2">{{stock.dividendDate}}</div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center title"><h4>报告期：{{stock.report}}</h4></div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">营业收入</div>
            <div class="col-md-2">{{stock.totalIncome}}</div>
            <div class="col-md-2 info-title">营收同比增长</div>
            <div class="col-md-2">{{stock.incomeDiff}}</div>
            <div class="col-md-2 info-title">毛利率</div>
            <div class="col-md-2">{{stock.mll}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">净利润</div>
            <div class="col-md-2">{{stock.totalProfits}}</div>
            <div class="col-md-2 info-title">净利润同比增长</div>
            <div class="col-md-2">{{stock.profitsDiff}}</div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center title"><h4>公司信息</h4></div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">公司全名</div>
            <div class="col-md-3">{{info.info[0].fullname}}</div>
            <div class="col-md-1 info-title">所在地</div>
            <div class="col-md-2">{{info.company[0].province}} - {{info.info[0].area}}</div>
            <div class="col-md-2 info-title">上市日期</div>
            <div class="col-md-2">{{info.info[0].list_date}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">所属板块</div>
            <div class="col-md-2">{{info.info[0].market}}</div>
            <div class="col-md-2 info-title">法人代表</div>
            <div class="col-md-2">{{info.company[0].chairman}}</div>
            <div class="col-md-2 info-title">总经理</div>
            <div class="col-md-2">{{info.company[0].manager}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">董秘</div>
            <div class="col-md-2">{{info.company[0].secretary}}</div>
            <div class="col-md-2 info-title">注册资本</div>
            <div class="col-md-2">{{info.company[0].regCapital}}</div>
            <div class="col-md-2 info-title">注册日期</div>
            <div class="col-md-2">{{info.company[0].setupDate}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">公司主页</div>
            <div class="col-md-2"><a target="_blank">{{info.company[0].website}}</a></div>
            <div class="col-md-2 info-title">电子邮件</div>
            <div class="col-md-2">{{info.company[0].email}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">办公室</div>
            <div class="col-md-6">{{info.company[0].office}}</div>
            <div class="col-md-2 info-title">员工人数</div>
            <div class="col-md-2">{{info.company[0].employees}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">主要业务及产品</div>
            <div class="col-md-10">{{info.company[0].mainBusiness}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">经营范围</div>
            <div class="col-md-10">{{info.company[0].businessScope}}</div>
        </div>
        <div class="row">
            <div class="col-md-2 info-title">公司介绍</div>
            <div class="col-md-10">{{info.company[0].introduction}}</div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center title"><h3>10大股东</h3></div>
        </div>
        <div class="row">
            <table class="table table-hover table-striped">
                <thead>
                    <th>持有者</th>
                    <th>公告日期</th>
                    <th>报告期</th>
                    <th>持有数量（股）</th>
                    <th>持有比例</th>
                </thead>
                <tr v-for="item in info.holders">
                    <td>{{item.holderName}}</td>
                    <td>{{item.annDate}}</td>
                    <td>{{item.endDate}}</td>
                    <td>{{item.holdAmount}}</td>
                    <td>{{item.holdRatio}}%</td>
                </tr>
            </table>
        </div>
        <div class="row">
            <div class="col-md-12 text-center title"><h3>10大股东图表一览</h3></div>
        </div>
        <div class="row">
            <div id="holders_chars" style="width: 100%;height:600px;"></div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center title"><h3>股东人数变化</h3></div>
        </div>
        <div class="row">
            <div id="holders_chars1" style="width: 100%;height:600px;"></div>
        </div>
    </div>
</body>
<script>
    var result =${data};
    var app = new Vue({
        el: '#app',
        data: {
            info:result,
            stock:${stock}
        }, methods:{
            pieTitle:function(){
                var list =this.info.holders;
                console.info(list);
                var titles= new Array();
                for(var i=0;i<list.length;i++){
                    titles.push(list[i].holderName);
                }
                return titles;
            },
            pieData:function(){
                var list =this.info.holders;
                var rows =new Array();
                for(var i=0;i<list.length;i++){
                    var row = new Object();
                    row.name=list[i].holderName;
                    row.value=list[i].holdAmount;
                    rows.push(row);
                }
                return rows;
            },
            toStockColorFont:function(value){
                var val =parseFloat(value);
                if(val>0){
                    return "<span style='color:red;'>"+value+"</span>";
                }
                return "<span style='color:green;'>"+value+"</span>";

            }
        }
    });
    var roeChart = echarts.init(document.getElementById('holders_chars'),'infographic');
    app.title = '环形图';
    option = {
        title : {
            text: '',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
       /* legend: {
            type: 'scroll',
            orient: 'vertical',
            x: 'left',
            data: app.pieTitle() //名称
            //selected: data.selected
        },*/
        series : [
            {
                name: '持有者',
                type: 'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data: app.pieData(),
                label:{            //饼图图形上的文本标签
                    normal:{
                        show:true,
                        //position:'inner', //标签的位置
                        textStyle : {
                            fontWeight : 300 ,
                            fontSize : 16    //文字的字体大小
                        },
                        formatter:'{b}({d}%)'


                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    roeChart.setOption(option);

    var holders=${holds};
    var date_list=[];
    var total_list=[];
    for(var i=holders.length-1;i>=0;i--){
        date_list.push(holders[i].timestamp);
        var vals=null==holders[i].ashare_holder?holders[i].holder_num:holders[i].ashare_holder;
        total_list.push(vals)
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('holders_chars1'),'infographic');

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '',
            subtext: '',
            x:'center',
            y:'top',
            textAlign:'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['分红情况']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_list
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        color:['#0099CC'],
        series: [
            {
                name: '股东人数',
                type: 'line',
                data: total_list,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                },
                /*itemStyle : {
                    normal : {
                        lineStyle:{
                            color:'#00FF00'
                        }
                    }
                },*/
                areaStyle: {}
            }

        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
</script>
</html>